<template>
	<view class="container">
		<view @touchstart="touchStart" @touchend="touchEnd($event,1)" class="guide guide-z-1"
			:class="{'guide1':!guide1}">
			<image style="width: 100vw;"
				src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/guide/guide1.png"
				mode="widthFix"></image>
			<view class="li-1">#</view>
			<view class="li-2">100%实名认证</view>
			<view class="li-3">海量有趣的碰头人，拓展你的社交边界</view>
			<view class="indicator-box">
				<view class="indicator">
					<view class="dot active"></view>
					<view class="dot dot-m"></view>
					<view class="dot"></view>
				</view>
				<view class="next-step" @click="nextStep(1)">
					<text class="dy-iconfont icon-xiayige"></text>
				</view>
			</view>
		</view>
		<view @touchstart="touchStart" @touchend="touchEnd($event,2)" class="guide guide-z-2"
			:class="{'guide2':!guide2}">
			<image style="width: 100vw;"
				src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/guide/guide2.png"
				mode="widthFix"></image>
			<view class="li-1">#</view>
			<view class="li-2">明码标价的碰头费</view>
			<view class="li-3">每PENG一次，都有收获！</view>
			<view class="indicator-box">
				<view class="indicator">
					<view class="dot "></view>
					<view class="dot dot-m active"></view>
					<view class="dot"></view>
				</view>
				<view class="next-step" @click="nextStep(2)">
					<text class="dy-iconfont icon-xiayige"></text>
				</view>
			</view>
		</view>
		<view @touchstart="touchStart" @touchend="touchEnd($event,3)" class="guide guide-z-3"
			:class="{'guide3':!guide3}">
			<image style="width: 100vw;"
				src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/guide/guide3.png"
				mode="widthFix"></image>
			<view class="li-1">#</view>
			<view class="li-2">百万保障基金</view>
			<view class="li-3">大平台、可信赖，下单无顾虑！</view>
			<view class="indicator-box">
				<view class="indicator">
					<view class="dot "></view>
					<view class="dot dot-m"></view>
					<view class="dot active"></view>
				</view>
				<view class="next-step" @click="nextStep(3)">
					<text class="dy-iconfont icon-xiayige"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				guide1: true,
				guide2: true,
				guide3: true,
				startPosition: 0,
				endPosition: 0
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},

		methods: {
			nextStep(value) {
				if (value == 1) {
					this.guide1 = false
				} else if (value == 2) {
					this.guide2 = false
				} else {
					uni.switchTab({
						url: '/pages/index/index',
						success: (res) => {
							app.globalData.timer = setInterval(() => {
								app.showtime()
							}, 1000)
						},
					});
				}
			},
			touchStart(event) {
				this.startPosition = event.changedTouches[0].clientX
			},
			touchEnd(event, value) {
				console.log(event, value);
				if (Math.abs(this.endPosition - this.startPosition) > 10) {
					this.endPosition = event.changedTouches[0].clientX
					var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
				} else {
					return;
				}
				if (elePosition == "left" && value == 1) {
					this.guide1 = false
				} else if (elePosition == "left" && value == 2) {
					this.guide2 = false
				} else if (elePosition == "left" && value == 3) {
					uni.switchTab({
						url: '/pages/index/index',
						success: (res) => {
							app.globalData.timer = setInterval(() => {
								app.showtime()
							}, 1000)
						},
					});
				} else if (elePosition == "right" && value == 3) {
					this.guide2 = true
				} else if (elePosition == "right" && value == 2) {
					this.guide1 = true
				} else if (elePosition == "right" && value == 1) {
					return
				}
				// console.log(elePosition)
				console.log(elePosition);
				// 在此处需要将数据传递过去，使用子组件给父组件传值的方式
				this.$emit('positionData', elePosition)
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #FFFFFF;
		box-sizing: border-box;
		position: relative;



		.guide {
			position: absolute;
			top: 300rpx;
			left: 0;
			background: #FFFFFF;
			transition: left 1s ease;
			-webkit-transition: left 1s ease;
			-moz-transition: left 1s ease;
			-ms-transition: left 1s ease;
			-o-transition: left 1s ease;

			/* #ifdef H5 */
			top: 212rpx;

			// transition: left .3;
			/* #endif */
			&.guide1 {
				left: -100vh;
			}

			&.guide2 {
				left: -100vh;
			}

			&.guide3 {
				left: -100vh;
			}

			&.guide-z-1 {
				z-index: 3;
			}

			&.guide-z-2 {
				z-index: 2;
			}

			&.guide-z-3 {
				z-index: 1;
			}


			.li-1 {
				font-size: 62rpx;
				font-weight: 900;
				color: #1E1F1F;
				line-height: 74rpx;
				margin-bottom: 18rpx;
				margin-top: 110rpx;
				margin-left: 74rpx;
			}

			.li-2 {
				font-size: 62rpx;
				font-weight: 900;
				color: #1E1F1F;
				line-height: 74rpx;
				margin-bottom: 40rpx;
				margin-left: 74rpx;
			}

			.li-3 {
				font-size: 30rpx;
				font-weight: 400;
				color: #999B9B;
				line-height: 42rpx;
				margin-bottom: 92rpx;
				margin-left: 74rpx;
			}

			.indicator-box {
				box-sizing: border-box;
				padding: 0 62rpx 0 74rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.next-step {
					width: 167rpx;
					height: 87rpx;
					background: #0E0E0D;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.dy-iconfont {
						color: #A7F517;
						font-size: 40rpx;
					}
				}
			}

			.indicator {
				display: flex;

				.dot {
					width: 16rpx;
					height: 16rpx;
					background: rgba(14, 14, 13, 0.5);
					border-radius: 50%;

					&.dot-m {
						margin: 0 9rpx;
					}

					&.active {
						width: 32rpx;
						height: 16rpx;
						background: #0E0E0D;
						border-radius: 40rpx;
					}
				}
			}
		}
	}
</style>